<template>
  <view class="container">
    <view>
      <u-navbar
        backIconColor="#fff"
        title-size="36"
        title="招商员中心"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('alli-bg.png')})`,
            height: `${186 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex" v-if="agencyUser">
            <u-avatar :src="userInfo.avatar" size="120"></u-avatar>
            <view class="u-info" v-if="userInfo">
              <view>{{ agencyUser ? agencyUser.contactName : userInfo.nickname }}</view>
              <view class="id">{{ agencyUser.levelName }}</view>
              <!-- <view class="id" v-else>云盟商户</view> -->
            </view>
          </view>
          <view class="t-r dis-flex flex-y-between flex-x-top">
            <view class="dis-flex flex-y-center" @click="ruleShow = true">
              <u-icon style="margin-right: 10rpx" name="/static/tishi.png" size="28"></u-icon>
              <text>权益说明</text>
            </view>
          </view>
        </view>

        <view class="card dis-flex flex-y-between">
          <view
            class="amount-item"
            @click="routeTo(amount.path)"
            v-for="(amount, i) in companyAmount"
            :key="i"
            v-if="amount.level ? amount.level === userLevel : true"
          >
            <view class="count">{{ amount.count }}</view>
            <view class="name">{{ amount.name }}</view>
          </view>
        </view>

        <view class="service">
          <view
            class="service-item dis-flex flex-y-center"
            v-if="ser.level ? ser.level === userLevel : true"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in companyServices"
            :key="ser.id"
          >
            <u-icon :name="ser.icon" size="90"></u-icon>
            <text>{{ ser.name }}</text>
          </view>
        </view>
        <u-gap height="20"></u-gap>
        <view class="guangg">
          <view class="gg-top dis-flex flex-y-center">
            <view class="shu"></view>
            <view class="tl">收益趋势图</view>
          </view>
          <u-line color="#E9EDF0"></u-line>
          <view class="ec-type dis-flex flex-y-center flex-y-between">
            <text>时间类型</text>
            <view class="group dis-flex flex-y-center">
              <view
                @click="onCheckEchart(7)"
                class="type-item"
                :class="checkEchart == '7' ? 'active' : ''"
              >
                近7天</view
              >
              <view
                @click="onCheckEchart(30)"
                class="type-item"
                :class="checkEchart == '30' ? 'active' : ''"
              >
                近30天</view
              >
              <view
                @click="onCheckEchart(365)"
                class="type-item"
                :class="checkEchart == '365' ? 'active' : ''"
              >
                近一年</view
              >
            </view>
          </view>
          <u-line color="#E6E6E6"></u-line>
          <view class="charts-box">
            <qiun-data-charts
              :canvas2d="true"
              canvasId="myCanvasId"
              type="area"
              :opts="opts"
              :chartData="chartData"
              :ontouch="true"
            />
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="ruleShow" border-radius="20" mode="center" width="600rpx" height="auto">
      <view class="pos-fixed rule-warpper">
        <view class="title">规则说明</view>
        <scroll-view scroll-y="true" style="min-height: 300rpx; max-height: 690rpx">
          <view class="content">
            <u-parse :html="ruleDetail" />
          </view>
        </scroll-view>
        <view class="colse-bt" @click="ruleShow = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      userLevel: 1, //1 高级合伙人 2经理
      chartData: {},
      ruleDetail: '',
      checkEchart: '7',
      ruleShow: false,
      companyAmount: [
        {
          id: 'income',
          name: '今日收益',
          count: 0,
          path: '/attract/income?status=1'
        },
        {
          id: 'income',
          name: '待入账收益',
          count: 0,
          path: '/attract/income?status=0'
        },
        {
          id: 'syc',
          name: '累计总收益',
          count: 0,
          path: '/attract/income-list?type=count'
        },
        {
          id: 'syc',
          name: '累计推广用户',
          count: 0,
          path: '/users/teams/index'
        },
        {
          id: 'syc',
          name: '累计推广商户',
          count: 0,
          path: '/attract/items-merch-info'
        }
      ],
      companyServices: [
        {
          id: 'tgm',
          name: '推广码',
          icon: '/static/attract/tgm.png',
          path: '/attract/share'
        },
        {
          id: 'symx',
          name: '收益明细',
          icon: '/static/attract/symx.png',
          path: '/other/my-wallet/my-wallet'
        },
        {
          id: 'wytx',
          name: '我要提现',
          icon: '/static/attract/wytx.png',
          path: '/other/withdrawal/withdrawal'
        },
        {
          id: 'txjl',
          name: '提现记录',
          icon: '/static/attract/txjl.png',
          path: '/attract/withdrawal-list'
        }
      ],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      userInfo: uni.getStorageSync('userInfo'),
      agencyUser: null,
      opts: {
        color: [
          '#ea7ccc',
          '#1890FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4'
        ],
        padding: [15, 15, 15, 15],
        dataLabel: false,
        enableScroll: false,
        // enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true
          // itemCount: 10
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2
        },
        extra: {
          scatter: {}
        }
      }
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  created() {
    this.$u.get('/app-api/member/agency-user/my').then((res) => {
      this.agencyUser = res.data
    })
    this.$u.get('/app-api/cms/agreement/get-content', { identify: 'point_rule' }).then((res) => {
      this.ruleDetail = res.data
    })
    this.$u.get('/app-api/member/agency-user/center').then((res) => {
      this.companyAmount[0].count = (res.data.todayUnfreezeBonusMoney * 0.01).toFixed(2)
      this.companyAmount[1].count = (res.data.freezingBonusMoney * 0.01).toFixed(2)
      this.companyAmount[2].count = (res.data.totalUnfreezeBonusMoney * 0.01).toFixed(2)
      this.companyAmount[3].count = res.data.inviteUserCount
      this.companyAmount[4].count = res.data.inviteMerchantCount
    })
    this.getChart()
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    getChart() {
      const app = this
      this.$u
        .get('/app-api/member/agency-user/get-money-trend-v2', {
          days: app.checkEchart
        })
        .then((res) => {
          const data = res.data
          // let chartData = {
          // 	categories: ["7-1","7-2"],
          // 	series: [{
          // 		name: "成交收入",
          // 		type: "line",
          // 		data: ["7-1","7-2"]
          // 	}]
          // }
          app.chartData = JSON.parse(JSON.stringify(data))
          // this.chartData = res.data
        })
    },
    onCheckEchart(type) {
      const app = this
      app.checkEchart = type
      app.getChart()
    },
    getServerDataList(ymd = '') {
      const app = this
      let limit
      if (app.checkEchart == 'week') {
        limit = 7
      }
      if (app.checkEchart == 'month') {
        limit = 30
      }
      let params = {
        limit: limit
      }
      let chartData = {
        categories: res.categories,
        series: [
          {
            name: '成交收入',
            type: 'line',
            data: res.series
          }
        ]
      }
      app.chartData = JSON.parse(JSON.stringify(chartData))
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    changeType() {
      const app = this
      uni.showLoading({
        title: '切换中',
        mask: true
      })
      setTimeout(function () {
        app.isUser = !app.isUser
        uni.hideLoading()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

.charts-box {
  width: 100%;
  height: 463rpx;
}

.container {
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  // height: 448rpx;
}

.content {
  position: relative;
  padding: 39rpx 0;

  .top {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    height: 120rpx;

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 34rpx;
      color: #ffffff;

      .id {
        // width: 120rpx;
        // height: 40rpx;
        // line-height: 40rpx;
        background: #e8fffc;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #10a28f;
        text-align: center;
        padding: 4rpx 10rpx;
      }
    }

    .t-r {
      flex-flow: column;
      height: 120rpx;
      padding: 16rpx 0;
      align-items: flex-end;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .card {
    // height: 280rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx 0;
    margin: 0 20rpx;
    flex-wrap: wrap;
  }

  .amount-item:nth-child(1),
  .amount-item:nth-child(2),
  .amount-item:nth-child(3) {
    margin-top: 0;
  }

  .amount-item {
    text-align: center;
    justify-content: space-between;
    display: flex;
    flex-flow: column;
    width: 33%;
    margin-top: 30rpx;

    .count {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .name {
      font-size: 26rpx;
    }
  }

  .service {
    // width: 100%;
    margin: 0 20rpx;
    height: 200rpx;
    background: #ffffff;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;

    .service-item {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: column;
      font-size: 26rpx;
      color: #333333;

      .service-name {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}

.guangg {
  padding: 30rpx 20rpx;
  height: auto;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0 20rpx;

  .gg-top {
    margin-bottom: 30rpx;

    .shu {
      width: 8rpx;
      height: 40rpx;
      background: #10a28f;
      border-radius: 3rpx;
    }

    .tl {
      font-weight: 600;
      font-size: 36rpx;
      color: #333333;
      margin-left: 20rpx;
    }

    .des {
      font-size: 24rpx;
      color: #999999;
      margin-left: 10rpx;
      margin-top: 4rpx;
    }
  }

  .ec-type {
    padding: 30rpx 0;

    text {
      font-size: 28rpx;
    }

    .type-item {
      width: 96rpx;
      height: 56rpx;
      background: #f2f2f2;
      border-radius: 10rpx;
      line-height: 56rpx;
      text-align: center;
      margin-left: 20rpx;
      font-size: 26rpx;
    }

    .active {
      background: #10a28f;
      color: #fff;
    }
  }
}

.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}
</style>
